<template>
  <div class="contract-date-wrap">
    <el-form-item label="合同日期:">
      <div>
        <template v-if="dateInfo.type === 1">
          <div style="display: flex; flex-wrap: wrap">
            <div class="gray-radio">年框类</div>
            （{{ dateInfo.stagesYearType | mapOptions(options.mffTypeOptions) }}）
            <span v-if="dateInfo.startTime || dateInfo.endTime" class="date-color">
              {{ dateInfo.startTime / 1000 | standardFormat('YYYY/MM/DD') }} - {{ dateInfo.endTime / 1000 | standardFormat('YYYY/MM/DD') }}
              <span style="color: #999;">（合同起止时间）</span>
            </span>
          </div>
        </template>
        <template v-else>
          <div style="display: flex;">
            <div class="gray-radio">单次类</div>
            <span v-if="dateInfo.pushTime" class="date-color">
              {{ dateInfo.pushTime / 1000 | standardFormat('YYYY/MM/DD') }}
              <span style="color: #999;">（执行发布时间）</span>
            </span>
          </div>
        </template>
      </div>
      <template v-if="dateInfo.items && dateInfo.items.length">
        <div v-for="(item, index) in dateInfo.items" :key="index" :style="{marginLeft: showMobilePage ? '0' : (dateInfo.type === 1 ? '171px' : '60px')}" class="date-color">
          {{ `付款日期（第${index + 1}期）: ` }}{{ item.payDate / 1000 | standardFormat('YYYY/MM/DD') }}
        </div>
      </template>
    </el-form-item>
    <div>
      <div v-if="dateInfo.type === 1">
        <el-form-item label="结算周期:">
          <span>{{ dateInfo.settleAccountPeriod | mapOptions(options.settleAccountPeriodOptions) }}</span>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="付款方式:">
          <div style="display:flex;">
            <el-tooltip placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ dateInfo.payWay | mapOptions(options.payWayOptions) }}</div>
              <span class="overflow" style="display: inline-block;max-width: 80%;">{{ dateInfo.payWay | mapOptions(options.payWayOptions) }}</span>
            </el-tooltip>
          </div>
        </el-form-item>
      </div>
    </div>
  </div>
</template>
<script>
import { mapOptions } from '@/filters';
import options from '../../../module/options';
import { standardFormat } from '@/filters/date';
export default {
  name: 'ContractDate',
  filters: {
    mapOptions,
    standardFormat
  },
  props: {
    dateInfo: {
      type: Object,
      default: () => { return null; }
    },
    showMobilePage: {// 移动端
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options
    };
  }
};
</script>
<style lang="scss" scoped>
.date-color {
  word-break: break-all;
  color: #666;
}
</style>
